<script setup lang="ts" name="Home">
const ROSLIB = window.ROSLIB;
import { ref, onMounted } from "vue";
import HomeCard from "@/components/HomeCard/home-card.vue";
import { getStatistic } from "@/api/home";
import yonghu from "@/assets/svg/yonghu.svg?component";
import { ElMessage } from "element-plus";
import { ip } from "@/api/utils";
import ROSCommand from "@/api/user";

const staticsData = ref({
  articleCount: 0,
  categoryCount: 0,
  tagCount: 0,
  userCount: 0,
  commitList: []
});

// 静态数据
const getStatisticData = async () => {
  const res = await getStatistic();
  if (res.code == 0) {
    Object.assign(staticsData.value, res.result);
  }
};

let ros2 = undefined;
const nodeList = ref([]);
const rosCommandInstance = new ROSCommand();
const cleanNodes = () => {
  ros2.getNodes(nodes => {
    console.log("Active nodes:");
    nodes.forEach(node => {
      console.log(node);
      rosCommandInstance.Command("rosnode", `kill ${node}`);
    });
  });
};

const initializeROSCommunication = () => {
  rosCommandInstance.Command(
    "roslaunch",
    "rosbridge_server rosbridge_websocket.launch"
  );
  rosCommandInstance.Command(
    "rosrun",
    "tf2_web_republisher tf2_web_republisher"
  );
};

const startServo = () => {
  rosCommandInstance.Command(
    "rosrun",
    "ros_serial ros_serial_node ctrlFlag:=7"
  );
};
const stopServo = () => {
  rosCommandInstance.Command(
    "rosrun",
    "ros_serial ros_serial_node ctrlFlag:=9"
  );
};
onMounted(async () => {
  await getStatisticData();
  ros2 = new ROSLIB.Ros({
    url: "ws://" + ip("9090")
  });
  ros2.on("error", function (error) {
    console.error("Failed to connect to ROS: ", error);
    ElMessage.error("ROS连接失败!");
  });
  // 获取节点并存储在nodes数组中
  ros2.getNodes(nodes => {
    console.log("Active nodes:");
    nodeList.value = nodes;
    console.log(nodeList.value);
  });
});
</script>

<template>
  <el-card class="home">
    <template #header> 首页 </template>
    <el-row>
      <el-col :xs="12" :sm="6">
        <home-card label="用户" :value="staticsData.userCount">
          <yonghu class="w-[48px] h-[48px] svg-fill" />
        </home-card>
      </el-col>
      <el-row>
        <el-button type="primary" @click="startServo">启动</el-button>
        <el-button type="warning" @click="stopServo">停止</el-button>
      </el-row>
      <el-card style="max-width: 480px">
        <template #header> 连接节点列表: </template>
        <el-col>
          <el-scrollbar height="400px" width="100%">
            <p v-for="node in nodeList" :key="node" class="scrollbar-demo-item">
              {{ node }}
            </p>
          </el-scrollbar>
        </el-col>
      </el-card>
      <el-row>
        <el-button type="primary" @click="initializeROSCommunication"
          >连接</el-button
        >
        <el-button type="danger" @click="cleanNodes">关闭</el-button>
      </el-row>
    </el-row>
    <div class="filings">
      <p>powered by chengshuai</p>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.filings {
  margin-top: 20px;
  text-align: center;
  color: #333;
  font-size: 12px;

  .change-color {
    text-decoration: none;
    transition: all 0.3s;

    &:hover {
      color: #000;
    }
  }
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.svg-fill {
  transition: all 0.3s;
}
/* 鼠标悬停的样式 */
.svg-fill:hover {
  transform: scale(1.1);
}
</style>
